<template>
  <el-card style="margin:20px 5px 0 5px">
    <!-- 标题部分 -->
    <div slot="header" class="clearfix">
      <!-- 头部左侧内容 -->
      <el-tabs v-model="activeName" class="tab" @tab-click="handleClick">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visit"></el-tab-pane>
      </el-tabs>
      <!-- 头部右侧内容 -->
      <div class="right">
        <span @click="setDay">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span>
        <span @click="setYear">本年</span>
        <el-date-picker
          v-model="time"
          class="data"
          type="daterange"
          size="mini"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :default-time="['12:00:00']"
        ></el-date-picker>
      </div>
    </div>

    <!-- 主体部分 -->
    <div>
      <el-row :gutter="10">
        <el-col :span="18">
          <!-- charts图表容器 -->
          <div ref="barCharts" style="width:100%;height:400px"></div>
        </el-col>
        <el-col :span="6">
          <h3>门店{{title}}排名</h3>
          <ul>
            <li v-for="item in rank" :key="item.no">
              <span class="gold">{{item.no}}</span>
              <span>{{item.name}}</span>
              <span>{{item.money}}</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import { mapState } from 'vuex'

export default {
  name: 'Sale',
  data () {
    return {
      activeName: 'sale',
      time: [],
      myCharts: null,
      rank: []
    }
  },
  computed: {
    title () {
      return this.activeName === 'sale' ? '销售额' : '访问量'
    },
    // 映射mock中的数据
    ...mapState({
      stateList: state => state.home.list
    })
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
      this.myCharts.setOption({
        title: {
          text: `${this.title}趋势`
        },
        xAxis: {
          data: this.title === '销售额' ? this.stateList.orderFullYearAxis : this.stateList.userFullYearAxis
        },
        series: [
          {
            data: this.title === '销售额' ? this.stateList.orderFullYear : this.stateList.userFullYear,
            itemStyle: {
              color: this.title === '销售额' ? '#5470c6' : '#ce7408'
            }
          }
        ]
      })
    },
    // 当日
    setDay () {
      const day = dayjs().format('YYYY-MM-DD')
      this.time = [day, day]
    },
    // 本周
    setWeek () {
      const start = dayjs().day(0).format('YYYY-MM-DD')
      const end = dayjs().day(6).format('YYYY-MM-DD')
      this.time = [start, end]
    },
    // 本月
    setMonth () {
      const start = dayjs().startOf('month').format('YYYY-MM-DD')
      const end = dayjs().endOf('month').format('YYYY-MM-DD')
      this.time = [start, end]
    },
    // 本年
    setYear () {
      const start = dayjs().startOf('year').format('YYYY-MM-DD')
      const end = dayjs().endOf('year').format('YYYY-MM-DD')
      this.time = [start, end]
    }
  },
  watch: {
    activeName () {
      if (this.activeName === 'sale') {
        this.rank = this.stateList.orderRank
      } else {
        this.rank = this.stateList.userRank
      }
    }
  },
  mounted () {
    this.myCharts = echarts.init(this.$refs.barCharts)
    this.myCharts.setOption({
      title: {
        text: '销售额趋势'
      },
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {},
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          type: 'bar',
          data: [415, 97, 200, 322, 365, 316, 216, 160, 92, 200, 137, 291],
          barWidth: '60%'
        }
      ]

    })
  }
}
</script>

<style scoped>
.clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}

>>> .el-card__header {
  border: none;
}

.tab {
  width: 100%;
}

.right {
  position: absolute;
  right: 0;
}

.right span {
  margin: 0 20px;
}

.data {
  width: 240px;
  margin: 0 20px;
}

h3 {
  margin: 0;
}

ul {
  list-style: none;
  height: 300px;
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 10%;
  margin: 15px 0;
}

span {
  font-size: 20px;
  cursor: pointer;
}
</style>
